<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        /* 基础样式重置：使用简单字体和一些边距 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            color: #333;
        }

        /* 页面的主标题居中显示 */
        h1 {
            text-align: center;
            font-size: 20px;
            margin-bottom: 20px;
        }

        /* fieldset用于将相关表单控件分组，并用legend加上分组标题 */
        fieldset {
            border: 1px solid #000;
            /* 给fieldset边框 */
            margin-bottom: 20px;
            /* 每个分组之间留出一定的间距 */
        }

        /* legend用于对该分组进行说明，一般为分组标题 */
        legend {
            font-weight: bold;
            padding: 0 5px;
            /* 给legend文本左右加点间距，避免贴着边框 */
        }

        /* 表格用于对齐表单控件与标签 */
        table {
            border-collapse: collapse;
            /* 合并表格单元格边框，简化边线 */
            width: 100%;
            /* 表格宽度100%，以自适应父级宽度 */
        }

        th,
        td {
            padding: 5px;
            /* 单元格内间距，增大可视舒适度 */
            vertical-align: top;
            /* 垂直对齐方式：顶端对齐，方便文本整齐 */
        }

        /* 标题列(如"用户名"、“密码”那一列)右对齐，让标签靠近输入框 */
        th {
            text-align: right;
            width: 80px;
            /* 给标签列一个固定宽度，以保持整齐 */
        }

        /* 表单区域可以通过加边框来区分 */
        .section {
            margin-bottom: 10px;
            /* 每个小分组间加点间距 */
            border-top: 1px solid #ccc;
            /* 用于分隔"必填信息"、"选填信息"和"其他个人信息" */
            padding-top: 10px;
            /* 分隔线与内容之间留出空隙 */
        }

        /* 提交和重置按钮等操作按钮的容器 */
        .buttons {
            text-align: center;
            /* 按钮在一行中居中对齐 */
            margin-top: 20px;
            /* 与上方内容保持距离 */
        }

        /* 灰色无效按钮示例 */
        .disabled-btn {
            background-color: #ccc;
            color: #999;
            border: 1px solid #999;
            padding: 5px 10px;
            cursor: not-allowed;
            /* 显示禁用状态的光标 */
            margin-left: 10px;
            /* 按钮之间增加空隙 */
        }
    </style>
</head>

<body>
    <!-- 页面主标题 -->
    <h1>用户注册</h1>

    <!-- 整个注册表单使用一个<form>包裹，以便提交，method和action可根据实际需求配置 -->
    <form action="#" method="post">

        <!-- 身份验证 - 必填信息分组 -->
        <!-- fieldset和legend用于分组相关表单元素，并加上标题 -->
        <fieldset>
            <legend>身份验证—必填信息</legend>

            <!-- 使用table对齐输入框和标签，th为标签文字，td为输入框 -->
            <table>
                <tr>
                    <!-- "用户名"标签行 -->
                    <th><label for="username">用户名</label></th>
                    <!-- 单元格放入文本输入框 -->
                    <td><input type="text" id="username" name="username" required></td>
                </tr>
                <tr>
                    <!-- "密码"标签行 -->
                    <th><label for="password">密 码</label></th>
                    <td><input type="password" id="password" name="password" required></td>
                </tr>
                <tr>
                    <!-- "密码确认"标签行 -->
                    <th><label for="repassword">密码确认</label></th>
                    <td><input type="password" id="repassword" name="repassword" required></td>
                </tr>
            </table>
        </fieldset>

        <!-- 身份信息 - 选填信息分组 -->
        <fieldset>
            <legend>身份信息—选填信息</legend>
            <table>
                <tr>
                    <!-- "所在城市"标签行 -->
                    <th><label for="city">所在城市</label></th>
                    <td><input type="text" id="city" name="city"></td>
                </tr>
                <tr>
                    <!-- "工作单位"标签行 -->
                    <th><label for="company">工作单位</label></th>
                    <td><input type="text" id="company" name="company"></td>
                </tr>
                <tr>
                    <!-- "家庭住址"标签行 -->
                    <th><label for="address">家庭住址</label></th>
                    <td><input type="text" id="address" name="address" style="width:300px;"></td>
                    <!-- 用style加宽输入框方便显示长地址 -->
                </tr>
            </table>
        </fieldset>

        <!-- 其他个人信息分组 -->
        <fieldset>
            <legend>其他个人信息</legend>
            <!-- 为了区分主题的不同信息段，这里也可以用小标题或<p>块来说明 -->
            <div class="section">
                <!-- 性别选择行 -->
                <table>
                    <tr>
                        <th>性别</th>
                        <td>
                            <!-- 单选框一组，name相同表示这些属于同一选项组 -->
                            <input type="radio" id="male" name="gender" value="男" checked><label for="male">男孩</label>
                            <input type="radio" id="female" name="gender" value="女"><label for="female">女孩</label>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="section">
                <!-- 爱好选择行（多选框） -->
                <table>
                    <tr>
                        <th>爱好</th>
                        <td>
                            <!-- 使用checkbox多选方式 -->
                            <input type="checkbox" id="music" name="hobby" value="音乐"><label for="music">音乐</label>
                            <input type="checkbox" id="sport" name="hobby" value="体育"><label for="sport">体育</label>
                            <input type="checkbox" id="computer" name="hobby" value="计算机"><label
                                for="computer">计算机</label>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="section">
                <!-- 喜欢的公司（多选框） -->
                <table>
                    <tr>
                        <th>喜欢的公司</th>
                        <td>
                            <input type="checkbox" id="baidu" name="companyfav" value="百度"><label for="baidu">百度</label>
                            <input type="checkbox" id="microsoft" name="companyfav" value="微软中国"><label
                                for="microsoft">微软中国</label>
                            <input type="checkbox" id="google" name="companyfav" value="谷歌中国"><label
                                for="google">谷歌中国</label>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="section">
                <!-- 个人简介（多行文本框） -->
                <table>
                    <tr>
                        <th><label for="intro">个人简介</label></th>
                        <td>
                            <!-- textarea用于多行文本输入 -->
                            <textarea id="intro" name="intro" rows="5" cols="40"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </fieldset>

        <!-- 提交区：提交表单与重新填写的按钮，以及一个无效按钮演示 -->
        <div class="buttons">
            <!-- 提交按钮，会将表单数据提交到action指定的处理地址 -->
            <input type="submit" value="提交您的资料">

            <!-- 重置按钮，将表单中所有字段恢复至初始值 -->
            <input type="reset" value="重新填写资料">

            <!-- 一个禁用状态的按钮示例，无实际交互，仅演示样式 -->
            <button type="button" class="disabled-btn" disabled>无效按钮</button>
        </div>
    </form>
</body>

</html>